<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>航班查询</title>
    <style type="text/css">
    	h1,p,td,th{
    		text-align: center;
    	}
    	.null{
    		height: 200px;
    		vertical-align: middle;
    		font-size: 24px;
    		font-weight: bolder;
    	}
    	.double,th{
    		background-color: #DDD;
    	}
    	table{
    		width:100%;
    		border: 1px solid #FFF; 
    	}
    </style>
  </head>
  
  <body>
  	<h1>航班查询</h1>
  	<form action="">
  		<p>
  			<label for="date">日期：</label>
  			<input type="text" name="date" id="date" value="${date }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  			城市：<label for="takeName">从</label>
  			<input type="text" name="takeName" id="takeName" value="${takeName }">
  			<label for="landingName">到</label>
  			<input type="text" name="landingName" id="landingName" value="${landingName }">
  			<button>搜索</button>
  		</p>
  	</form>
  	<table>
  		<tr>
  			<th>航空公司/航班/机型</th>
  			<th>起降时间</th>
  			<th>机场</th>
  			<th>飞行时长</th>
  			<th>经停</th>
  			<th>参考报价</th>
  		</tr>
  		<c:choose>
	  		<c:when test="${empty flights}">
	  			<tr>
	  				<td colspan="6" class="null">没有找到任何航班信息</td>
	  			</tr>
	  		</c:when>
	  		<c:otherwise>
	  			<c:forEach var="f" items="${flights }" varStatus="status">
					<tr <c:if test="${status.index%2==0}"> class="double" </c:if> id="f${f.id}">
						<td>${f.airline }${f.flightCode }<br/>${f.type }</td>
						<td>
							<fmt:formatDate value="${f.takeTime }" pattern="HH:mm"/>
							<br/>
							<fmt:formatDate value="${f.landingTime }" pattern="HH:mm"/>
						</td>
						<td>${f.takeAirports.airportName }<br>
							${f.landingAirports.airportName }
						</td>
						<td>${f.flightTime }</td>
						<td>${f.stopAirport }</td>
						<td>${f.referencePrice }
							<button onclick="showTickets(${f.id})">查询机票</button>
						</td>	
					</tr>  			
	  			</c:forEach>
	  		</c:otherwise>
  		</c:choose>
  	</table>
  	<script type="text/javascript" src="<%=basePath%>static/js/jquery-1.12.4.min.js"></script>
  	<script type="text/javascript">
  		function showTickets(id){
  			$(".tickets").remove();
  		
  			var url = "<%=basePath%>flightTickets.json?flightId="+id;
   			$.get(url,function(date){
   				$.each(date,function(n,val){
   					var innerHtml = "<tr class='double tickets'><td colspan='2'>"+val.sellCompany
   									+"</td><td colspan='2'>￥"
   									+val.ticketPrice+"</td></tr>";
   					$("#f"+id).after(innerHtml);
   				});
   			},"json");
  		}
  	
  	</script>
  </body>
</html>
